<script setup lang="ts">
import { useI18n } from 'vue-i18n';

const { t } = useI18n()

const props = defineProps<{
  tableData: {
    currency: any
    game_type: string
    bet_amount: number
    rebate_amount: number
    detail: any
  }[]
}>()


const emit = defineEmits(['detail'])

const tableData = computed(() => {
  return props.tableData
})

function goDetail(detail: any){
  emit('detail', detail)
}

</script>

<template>
  <div class="statistics-table">
    <div class="table-header">
      <span class="col-type">{{ t('currency') }}</span>
      <span class="col-count">{{ t('affiliate_program_type') }}</span>
      <span class="col-bet">{{ t('affiliate_program_bet') }}</span>
      <span class="col-win">{{ t('affiliate_program_amount') }}</span>
    </div>
    <div class="table-row" v-for="(row, idx) in tableData" :key="idx" v-if="tableData.length > 0" @click="goDetail(row.detail)">
      <AppCurrencyIcon
            :show-name="false"
            :currency-type="row.currency as any"
            icon-align="left"
            class="ml-2 w-4 h-4 rounded-full"
          />
      <span class="col-count">{{ row.game_type }}</span>
      <span class="col-bet">
        <AppAmount class="theme-amount1" :amount="row.bet_amount || 0" :currency-code="row.currency" :show-icon="false" />
      </span>
      <span class="col-win">
        <AppAmount class="theme-amount1" :amount="row.rebate_amount || 0" :currency-code="row.currency" :show-icon="false" />
      </span>
    </div>
    <AppNoData v-else/>

  </div>
</template>

<style scoped>
.statistics-table {
  
}
.table-header{
  border-radius: 6px 6px 0 0;
}
  
.table-header, .table-row {
  background: #292D2E;
  display: grid;
  grid-template-columns: 80px 1fr 1fr 1fr;
  gap: 8px;
  align-items: center;
  padding: 0 16px;
  height: 48px;
  font-size: 14px;
  border-radius: 6px 6px 0 0;
}

.table-row:nth-child(even) {
  background: linear-gradient(0deg, #3A4142 0%, #3A4142 100%), #323738;
}
.col-type {
  justify-content: flex-start !important;
}
.col-count, .col-bet {
  justify-content: center !important;
}
.col-win {
  justify-content: flex-end !important;
}
.table-header span, .table-row span {
  display: flex;
  align-items: center;
}
.win {
  color: #24EE89;
  font-weight: bold;
}
.lose {
  color: #B3BEC1;
}

.theme-amount1 {
  color: green;
  @include webTheme('green') {
    color: var(--tg-text-yellow-light);
  }
  @include webTheme('greenblack') {
    color:  var(--tg-table-amount-color);
  }
  @include webTheme('white') {
    color: #FF9820;
  }
}
</style>
